<template>
    <div class="footWarpper" :style="`${footW && `width: ${footW}px`};${footH && `height: ${footH}px`}`" :data-hash="hashName">
      <slot></slot>
    </div>
  </template>
  <script>
  import emitter from '../../utils/emitter'
  import { createHash } from '../../utils/createHash'
  export default {
    name: 'v-foot',
    mixins: [emitter],
    components: {
    },
    inject: ['root'],
    data() {
      return {
        footH: 0,
        footW: 0
      }
    },
    props: {
      height: {
        type: Number,
        default: 0
      },
      width: {
        type: Number,
        default: 0
      },
      chart: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {
      hashName() {
        const name = createHash(5) + '_' + 'v-foot'
        return name
      },
    },
    watch: {
      root: {
        handler(n, o) {
          if (!this.height) return
          this.footH = this.root[`${this.hashName}_height`]
          this.footW = this.root[`${this.hashName}_width`]
          this.$emit('popFoot', {'height': this.footH, 'width': this.footW})
        },
        deep: true
      }
    },
    created() {
    },
    mounted() {
      this.$nextTick(cb => {
        /* 当高度不为0时 */
        if (this.height) {
          this.dispatch('v-fullscreen', 'handleModule', { name: this.hashName, height: this.height, width: this.width })
          this.footH = this.root[`${this.hashName}_height`]
          this.footW = this.root[`${this.hashName}_width`]
          this.$emit('popHead', {'height': this.footH, 'width': this.footW})
        }
      })
    },
    methods: {
    }
  }
  </script>
  <style scoped>
  .footWarpper{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  </style>
